<template>
	<div class="text-input">
		<div v-if="fieldId.includes(item.businessId)">
			<tag-input :autosize="{ minRows: 2, maxRows: 12}" @blur="blur" ref="field" @close-tag="close" :placeholder="item.hint" :disabled="disabled || item.fieldType === 'autoNumber'" :type="item.fieldType === 'multiText' ? 'textarea' : 'input'" v-model="form[item.businessId]"></tag-input>
		</div>
		<el-input v-else :autosize="{ minRows: 2, maxRows: 12}" @blur="blurValue" ref="field" :placeholder="item.hint" :disabled="disabled || item.fieldType === 'autoNumber'" :type="item.fieldType === 'multiText' ? 'textarea' : 'input'" :value="value" @input="onlyChangeValue" />
	</div>
</template>

<script lang="ts">
import { Component, Mixins, Inject } from 'vue-property-decorator';
import widgetCommon from '../common/widgetCommon';
import tagInput from '@/afterSales/components/tag-input/index.vue';
@Component({
  name: 'tableInput',
  components: {
    tagInput
  }
})
export default class extends Mixins(widgetCommon) {
  @Inject({ default: {} }) private readonly recordVM!: any;
  private get fieldId () {
    const form = this.recordVM.form || {};
    if (!form.maskedFields) {
      return [];
    } else {
      return form.maskedFields.map((item) => {
        return item.fieldId;
      });
    }
  }

  private blurValue () {
    this.changeValue(this.value);
  }

  private close () {
    this.changeValue('');
  }
}
</script>

<style lang="stylus" scoped>
.default-value {
	right 0
	top -30px
	position absolute
}
</style>
